<template>
  <div class="assess">
    <div class="assess-scroll">
      <!-- 综合评价 -->
      <div class="shop-assess">
        <div class="score">
          <h2>4.5</h2>
          <h4>综合评分</h4>
          <p>高于周边商家69.2%</p>
        </div>
        <div class="star">
          <div>
            <h3>服务态度</h3>
            <van-rate
              v-model="shopStar"
              allow-half
              :size="16"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
            <span>4.5</span>
          </div>
          <div>
            <h3>服务态度</h3>
            <van-rate
              v-model="shopStar"
              allow-half
              :size="16"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
            <span>4.5</span>
          </div>
          <div>
            <h3>送达时间</h3>
            <span class="to-time">44分钟</span>
          </div>
        </div>
      </div>
      <!-- 背景盒子 -->
      <div class="bgc-box"></div>
      <!-- 留言分类按钮 -->
      <div class="shop-msg">
        <div class="msg-btn">
          <van-button size="small" color="linear-gradient(to right, #515f6b, grey)" @click="all"
            >全部{{ allAssess.length }}</van-button
          >
          <van-button size="small" color="#bbb" @click="good"
            >满意{{
              goodAssess.length == 0 ? "" : goodAssess.length
            }}</van-button
          >
          <van-button size="small" color="#bbb" @click="noGood"
            >不满意{{
              noGoodAssess.length == 0 ? "" : noGoodAssess.length
            }}</van-button
          >
        </div>
        <div class="has-con">
          <van-icon
            name="success"
            size="16"
            @click="onlyText"
            :style="{
              background: flag
                ? '#f5a113'
                : '#bbb',
            }"
          />
          <span>只看有内容的评价</span>
        </div>
      </div>
      <!-- 用户留言 -->
      <div class="user-msg">
        <div class="single-user" v-for="(item, index) in assess" :key="index">
          <!-- 头像 -->
          <div class="user-pic">
            <img :src="item.avatar" />
          </div>
          <!-- 留言 -->
          <div class="msg-area">
            <div class="msg-state">
              <div class="info">
                <p class="account">{{ item.username }}</p>
                <p class="star-time">
                  <van-rate
                    v-model="item.score"
                    :size="16"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                  <span class="to-time">{{ item.deliveryTime }}分钟送达</span>
                </p>
              </div>
              <div class="date">{{ item.rateTime }}</div>
            </div>
            <div class="msg-detail">
              <p>{{ item.text }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRatings_api } from "@/apis/assess";
import BScroll from "@better-scroll/core";
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      assessScroll: null,
      shopStar: 4.5, // 店铺星级评价
      assess: [], // 留言
      goodAssess: [], // 满意留言
      noGoodAssess: [], // 不满意留言
      onlyTxt: [], // 有内容留言
      flag: false, // 之查看有内容留言样式标杆
    };
  },
  methods: {
    // 所有留言
    all() {
      this.flag = false;
      this.assess = this.allAssess;
    },
    // 过滤满意留言
    good() {
      this.flag = false;
      this.goodAssess = this.allAssess.filter((item) => {
        return item.rateType == 0;
      });
      this.assess = this.goodAssess;
    },
    // 不满意留言
    noGood() {
      this.flag = false;
      this.noGoodAssess = this.allAssess.filter((item) => {
        return item.rateType == 1;
      });
      this.assess = this.noGoodAssess;
    },
    // 只查看有内容留言
    onlyText() {
      this.flag = true;
      this.onlyTxt = this.allAssess.filter((item) => {
        return item.text != "";
      });
      this.assess = this.onlyTxt;
    },
    ...mapMutations(["initAllAssess"]),
  },
  computed: {
    ...mapState(["allAssess"]),
  },
  created() {
    getRatings_api().then((res) => {
      this.initAllAssess(res.data);
      this.assess = this.allAssess; // 所有留言
      // 滚动插件
      this.$nextTick(() => {
        this.assessScroll = new BScroll(".assess", {
          click: true,
        });
      });
    });
  },
};
</script>

<style lang="less" scoped>
.assess {
  width: 100vw;
  height: calc(72vh - 44px);
  overflow: hidden;
  .shop-assess {
    width: 100vw;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    .score {
      width: 38vw;
      border-right: 1px solid #ccc;
      box-sizing: border-box;
      text-align: center;
      h2 {
        font-size: 22px;
        color: #f5a113;
      }
      h4 {
        font-size: 14px;
        margin: 8px 0;
      }
      p {
        color: #515f6b;
      }
    }
    .star {
      width: 62vw;
      padding-left: 14px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      div {
        display: flex;
        h3 {
          font-size: 14px;
        }
        .van-rate {
          margin: 0 10px;
        }
        span {
          color: #f5a113;
        }
        .to-time {
          color: #515f6b;
          margin-left: 10px;
        }
      }
    }
  }
  .bgc-box {
    width: 100vw;
    height: 3vh;
    background-color: #f2f6f9;
  }
  .shop-msg {
    width: 100vw;
    border-bottom: 1px solid #bbb;
    padding: 0 20px;
    box-sizing: border-box;
    .msg-btn {
      padding: 20px 0;
      border-bottom: 1px solid #ccc;
      .van-button {
        margin-right: 10px;
      }
    }
    .has-con {
      padding: 20px 0;
      display: flex;
      .van-icon {
        // background-color: #f5a113;
        color: #fff;
        margin-right: 10px;
        border-radius: 50%;
      }
    }
  }
  .user-msg {
    padding: 0 20px;
    box-sizing: border-box;
    .single-user {
      display: flex;
      justify-content: space-between;
      padding: 20px 0;
      border-bottom: 1px solid #ccc;
      box-sizing: border-box;
      .user-pic {
        width: 10vw;
        height: 10vw;
        border-radius: 5vw;
        overflow: hidden;
        margin-right: 20px;
        img {
          width: 10vw;
        }
      }
      .msg-area {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .msg-state {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          .info {
            height: 10vw;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .account {
              color: #020202;
            }
            .star-time {
              display: flex;
              .to-time {
                margin-left: 20px;
                color: #515f6b;
              }
            }
          }
          .date {
            color: #bbb;
          }
        }
      }
    }
  }
}
</style>